/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import * as React from "react";
import { Button } from "../Button";
import { storiesOf } from "@storybook/react";
import {ToastContainer, useToast} from "../Toast";
import { ToggleDarkMode } from "./ToggleDarkMode";
import {AlertContent} from "../Alert";
import {Text} from "../Text";
// import { ToastContainer } from 'react-toastify';
//import { toast } from 'react-toastify';


function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        toast({
          duration: 99500,
          title: "Hello world",
          subtitle: "Excepteur exercitation 停留 2500 ms.afas四惠大少时诵诗书所厦大沙东",
          //position: "top-right"
          intent: 'error',
        });

          toast({
              duration: 3500,
              render: ({ onClose, id }) => {return "你速度和那时候";}
          });
          toast({
              duration: 8500,
              title: "Hello 1",
              content: <AlertContent
                  title={"测试2"}
              >
                  <Text>
                     Deserunt ea est ad23 repreh enderit
                      commodo voluptate董生端合是前身 labore
                  </Text>
                  <Button onPress={() => console.log("hlox手re")}
                  >d跳新社会陈的</Button>
              </AlertContent>
          });
      }}
    >
      Show toast
    </Button>
  );
}

export const ToastStories = storiesOf("Toast", module).add("basic", () => {
  return (
    <div css={{ PADDING: "0rem" }}>
      <ToastContainer />
      <Example />
    </div>
  );
});
